<template>
  <div :class="className" :style="{ height: height, width: width}" :id="chartOption.bindingDiv">

     <div :id="'galaxy'+chartOption.bindingDiv" :style="{ height: height, width: width}"></div>
      <!--<canvas :id="'c'+customId" ref="c" :style="{ height: height, width: width}"></canvas> -->
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from '@/views/dashboard/mixins/resize'

import { GalaxyRun } from "./Galaxy"

import '../../animate/animate.css'

const animationDuration = 6000;

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartOption: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
      dataOption: this.chartOption,
      
      opts:{
	  
        lineCount: 100,
        starCount: 30,
        
        radVel: .01,
        lineBaseVel: .1,
        lineAddedVel: .1,
        lineBaseLife: .4,
        lineAddedLife: .01,
        
        starBaseLife: 10,
        starAddedLife: 10,
        
        ellipseTilt: -.3,
        ellipseBaseRadius: .15,
        ellipseAddedRadius: .02,
        ellipseAxisMultiplierX: 2,
        ellipseAxisMultiplierY: 1,
        ellipseCX: this.width / 2,
        ellipseCY: this.height / 2,
        
        repaintAlpha: .015
      },
      tick:0,
      timer: ''
    };
  },
  watch: {
    width() {
      this.$nextTick(() => {
        this.setOptions(this.dataOption);
      });
    },
    height() {
      this.setOptions(this.dataOption);
    },
    chartOption: {
      deep: true,
      handler(newVal) {
        this.setOptions(JSON.parse(JSON.stringify( newVal )));
      }
    },

  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    clearTimeout(this.timer);
    this.chart = null;
  },
  computed:{
  },
  methods: {
    initChart() {
      
      this.setOptions(this.chartOption);
      
    },
    setOptions(dataOption) {
      //let obj = document.getElementById('c'+this.customId);//this.$refs.c;
       //document.getElementById('c'+this.customId)//

      //this.opts = dataOption.opts;
      dataOption.opts.ellipseCX = this.width / 2;
      dataOption.opts.ellipseCY = this.height / 2;
      var galaxy = document.getElementById('galaxy'+this.chartOption.bindingDiv);
      
      var box = document.getElementById('c'+this.chartOption.bindingDiv);     
      if (box != null) {
        box.remove();
      }

      //创建一个画布
      let can = document.createElement('canvas');
      //设置画布的长宽
      var width = this.width.replace("px","");
      var height = this.height.replace("px","");
      
      can.id = 'c'+this.chartOption.bindingDiv;
      can.width = width;
      can.height = height;

      galaxy.append(can);
      GalaxyRun(can, dataOption.opts,this.width,this.height, width,height);

    },
  }
};
</script>
